<template>
    <el-container>
        <el-header class="head">
            <el-col  :span="4" class="left">
                <el-select v-model="value" placeholder="请选择批量操作" class="inputM">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="2"  >
                <el-button type="primary" plain class="btnsousuo" @click="sure">确定</el-button>
            </el-col>
        </el-header>
        <el-main>
            <el-table class="tablemenu"  @selection-change="handleSelectionChange"
                      :data="tableData"
                      stripe
                      style="width: 100%">
                <el-table-column type="selection"></el-table-column>
                <el-table-column
                        prop="goodsId"
                        label="id号" width="70">

                </el-table-column>

                <el-table-column  prop="goodsName" label="商品名称" width="300">

                </el-table-column>



                <el-table-column
                        prop="goodsUuid"
                        label="货号">
                </el-table-column>

                <el-table-column
                        prop="goodsPrice"
                        label="价格">
                </el-table-column>



                <el-table-column prop="caozuo" label="操作">

                    <template slot-scope="scope">
                        <el-button   type="danger" icon="el-icon-delete" class="btn" circle  @click="del(scope.row.goodsId)" ></el-button>
                        <el-button   type="primary" icon="el-icon-edit" class="btn" circle @click="huan(scope.row.goodsId)" ></el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-col class="over">



                <el-pagination class="right"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"

                               :page-size="5"
                               layout="total, prev, pager, next"
                               :total="count">
                </el-pagination>
            </el-col>
<!--            <el-button type="success" icon="el-icon-check" circle></el-button>-->

        </el-main>
    </el-container>

</template>

<script>
    export default {
        name: "delAll",
        methods: {
            //全选
            handleSelectionChange(val) {
                // this.multipleSelection = val;
                // console.log(val)
                this.allArr=val;
            },




            handleSizeChange(val) {
                // this.$axios.post('/api/goods/list',{pageSize:5,goodsIsDeleted:1}).then((res)=>{
                //     console.log(val)
                //     // console.log(res.data.data)
                //     this.tableData=res.data.data
                // })
            },
            handleCurrentChange(val) {
                this.$axios.post('/api/goods/list',{page:val,goodsIsDeleted:1,pageSize:3}).then((res)=>{
                    console.log(val)
                    // console.log(res.data.data)
                    this.tableData=res.data.data
                })
            },



            //批量还原接口
            sure(){
                 var newArr=[];
                 this.allArr.forEach((item)=>{
                     // console.log(item)
                     newArr.push(item.goodsId)
                     // console.log(newArr)
                 })

                if(this.value==0){
                    this.$axios.post('/api/goods/restoreGoods',[...newArr]).then((res)=>{
                         this.getGoodList();

                    })
                }else {
                    this.$axios.post('/api/goods/real/delete',[...newArr]).then((res)=>{
                        console.log(res)
                        // this.getGoodList();
                    })
                }

            },



            //单个删除
            del(id){
                var arr=[];
                arr.push(id)
                this.$axios.post('/api/goods/real/delete',[...arr]).then((res)=>{
                    console.log(res);
                    // this.getGoodList();
                })
            },

            //单个还原
            huan(id){
                // console.log(id);
                var arr=[];
                arr.push(id)
                // console.log(arr)
                this.$axios.post('/api/goods/restoreGoods',[...arr]).then((res)=>{
                    // console.log(res);
                    this.getGoodList();
                })
            },





           //得到数据显示方法
            getGoodList(){

                this.$axios.post('/api/goods/list',{
                    goodsIsDeleted:1,
                }).then((res)=>{
                    // console.log(res)
                    // console.log(res.data.data)
                    this.tableData=res.data.data
                    // this.tableData=res.data.data
                    this.count=res.data.count
                    // console.log(res.data)
                })
            }

        },
        data() {
            return {
                allArr:'',    //全选





                // totolnum:'count',
                currentPage:'',
                input: '',
                count:null,

                options: [{
                    value: 0,
                    label: '还原'
                }, {
                    value: 1,
                    label: '删除'
                }],
                value: '',
                totalCount:20,
                tableData: [
                ]

            }
        },







        //加载页面请求数据
        created() {
            this.getGoodList();

        }
    }
</script>

<style scoped>
    .left{
        text-align:left;
    }
    .zi{
        font-size: 14px;
        color: black;
    }
    .inputM{
        width: 200px;
        height: 32px;
        border-radius: 40%;
    }
    .shopwenzi{
        margin-bottom: 20px;
    }
    /deep/ .el-input__inner{
        height: 30px;
    }
    .btnsousuo{
        height: 30px;
        text-align: center;

    }
    /deep/.el-button{
        line-height: 0;
    }
    /deep/ .el-image{
        vertical-align: middle;
    }
    .over{
        overflow: hidden;
        margin-top: 10px;
    }
    .right{
        float: right;
    }
    .btnhuishouzhan{
        float: left;
    }
    .el-button--primary.is-plain{
        background-color:  #00CC33;
        color: white;
    }
    .el-col-6{
        width: 22%;
    }

</style>